<template>
    <div class="news-list-component">
        <div class="news-uplist"
             v-for="(i,index) in newsList"
             @click="handleNewsJump(i)"
             :key="index">
            <div class="news-uplist-left">
                <p>{{i.title}}</p>
                <div class="news-uplist-text">
                    <span class="news-uplist-left-date">{{ dateFormat(i.noticeTime,  'YYYY-MM-DD') }}</span>
                    <i class="iconfont icon-eye"></i>
                    <span>{{i.pv}}</span>
                </div>
            </div>
            <div class="news-uplist-right">
                <img :src="i.content">
            </div>
        </div>
    </div>
</template>

<script>
    /**
     * Created by 吴彦祖 on 2018/3/27.
     * 资讯列表，用于资讯页面
     * @param
     * @newList {Array} 用于渲染列表数据
     */
    import { dateFormat } from 'vux'
    export default {
        name: 'news-list-component',
        data () {
          return {
              dateFormat
          }
        },
        methods: {
            // 资讯的跳转
            handleNewsJump (newItem) {
                this.$emit('on-click-news', newItem)
            }
        },
        props:{
        	newsList:{
        		type:Array,
                default:()=>{
        			return [
        				{
                            title:'这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题',
                            noticeTime: {
                                time: '1520424597000'
                            },
                            pv:'9999'
        				}
                    ]
                }
            }
        }
    }
</script>

<style lang="less">
    @import '../style/mixin.less';
    .news-list-component{
        .news-uplist{
            padding:10px 0 10px 0;
            border-bottom: solid 1px @color-background-default;
            .flexLayout(space-between,center,row);
            margin:0px 12px 0px 12px;
            box-sizing: border-box;
            height:88px;
            .news-uplist-left{
                width:65%;
                height:100%;
                .flexLayout(space-between,flex-start,column);
                p{
                    width: 100%;
                    font-size: @font-size-medium;
                    color: @color-text-primary;
                    .ellipsisLn(2);
                }
                .news-uplist-text{
                    font-size: @font-size-small;
                    color:@color-text-third;
                    i{
                        margin-left:44px;
                        vertical-align: middle;
                    }
                }
            }
            .news-uplist-right{
                width:99px;
                height:64px;
                line-height:64px;
                text-align: center;
                overflow: hidden;
                /*margin-left: 27px;*/
                img{
                    width:99px;
                    height:64px;
                }
            }
        }
    }
</style>
